<template>
  <div id="tab-box">
    <!-- <div @click="tabClick(0)" class="tab-item" :class="tabIndex === 0 && 'active'">{{ $t('views.topicManagement.tabText1') }}</div>
    <div @click="tabClick(1);" class="tab-item" :class="tabIndex === 1 && 'active'">{{ $t('views.topicManagement.tabText2') }}</div> -->
    <div v-for="(item, index) in tabData" :key="index" @click="tabClick(index);"  v-if="!item.hidden" class="tab-item" :class="tabIndex === index && 'active'">
      {{ item.text }}
      <slot :name="item.itemSlot"></slot>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';

export default {
  props: {
    tabData: {
      type: Array,
      default: () => [],
    },
    // 是否根据菜单来筛选tab的内容
    tabDataLimitFlag: {
      type: Boolean,
      default: false,
    },
    // 菜单里面的id项
    menuItem: {
      type: Array,
      default: () => [],
    },
    // tab 对应的 id 和 菜单中的id去对应 ，这里是写死的
    tabDataIdArr: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    if (localStorage.getItem('tabNum')) {
      this.tabIndex = Number(localStorage.getItem('tabNum'));
      this.$emit('tabEmit', {
        tabIndex: this.tabIndex,
      })
    }

  },
  computed: {
    ...mapGetters([
      'getTabNum'
    ]),
  },
  data() {
    return {
      tabIndex: 0,
    };
  },
  methods: {

    tabClick(type) {
      this.tabIndex = type;
      localStorage.setItem('tabNum', type);
      this.$emit('tabEmit', {
        tabIndex: type,
      })
    },
  },
  watch:{
    getTabNum(){
      if(this.tabDataLimitFlag){
        this.tabClick(10000)
        var timer=setTimeout(()=>{
          this.tabClick(0);
          clearTimeout(timer)
        })
      }



    }
  }
}
</script>
<style lang="scss" scoped>
  $tabPadding: 10px;
  $tabFont: 12px;
  $tabLH: 1.5;
  #tab-box {
    border-bottom: 1px solid #dcdee2;
    margin-bottom: 5px;
    overflow-x: auto;
    white-space: nowrap;
    //height: $tabFont * $tabLH + $tabPadding * 2 + 2;
    flex: 0 0 $tabFont * $tabLH + $tabPadding * 2 + 2;
    -webkit-flex: 0 0 $tabFont * $tabLH + $tabPadding * 2 + 2;
    .tab-item.active {
      border-color: #dcdee2;
      border-radius: 5px 5px 0 0;
      background: #ffffff;
      color: #348eed;
    }
  }
  #tab-box .tab-item {
    padding: $tabPadding 20px;
    font-size: $tabFont;
    line-height: $tabLH;
    display: inline-block;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: 0;
  }
</style>
